<template>
	<div class="tab-own">
		<!-- 实例 【属性 | 】 -->
		<a href="">图示IMG/LINK</a>
		<div class="flex sp-arround">
			<modelTab :title="propsT" :data="propsD"/>
			<modelTab :title="methodDataT" :data="methodDataD"/>
			<modelTab :title="methodEventT" :data="methodEventD"/>
			<modelTab :title="methodLifeT" :data="methodLifeD"/>
			<!-- <modelTab :title="" :data=""/> -->
		</div>
	</div>
</template>

<script>
import modelTab from './child/modelTab'
export default {
	components: { modelTab },
	data() {
		return {
			showI: 0,
			
			propsT: '实例属性',
			// instance -> vm.$data [model -> vm.$]
			propsD: [
				'data', 'props', 'el',
				'options', 'parent', 'root',
				'children', 'slots', 'scopedSlots',
				'refs', 'isServer', 'attrs',
				'listeners'
			],

			methodDataT: '实例方法/数据',
			methodDataD: [
				'watch', 'set', 'delete'
			],

			methodEventT: '实例方法-事件',
			methodEventD: [
				'on', 'once', 'off', 'emit'
			],
			
			methodLifeT: '实例方法-生命周期',
			methodLifeD: [
				'mount', 'forceUpdate', 'nextTick',
				'destroy',
			],

			// T: '',
			// D: [
			// 	'', '', '',
			// 	'', '', '',
			// ],
			// I -> Introduce
		}
	},
	methods: {

	}
}
</script>

<style lang="scss" scoped>

</style>